<template>
  <div class="head-nav">
    <div class="menu flex">
      <router-link
        :to="item.url"
        v-for="(item,i) in menus"
        :key="i"
        class="item flex"
        :class="selectItem.title === item.title ? 'selectItem' : ''"
        @click="selectPage(item)"
      >
        <span>{{ item.title }}</span>
      </router-link>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
export interface Menu {
  title: string,
  url: string
}
let selectItem: Menu = reactive({ title: '模板页', url: '/' })
const menus: Array<Menu> = reactive([
  { title: '首页', url: '/' },
  { title: '模板页', url: '/template' },
  { title: '监控页面', url: '/monitoring' },
  { title: '报警管理', url: '/' },
  { title: '趋势曲线', url: '/' },
  { title: '过程参数', url: '/' },
  { title: '质量管理', url: '/' },
  { title: '权限管理', url: '/' }
])
const selectPage = (item: Menu) => {
  selectItem.title = item.title
  selectItem.url = item.url
}
</script>
<style lang="scss" scoped>
.head-nav {
  height: 44px;
  padding: 0 20px 0 20px;
  background: var(--header-menu-bg-color);
  box-shadow: 0px 4px 14px 2px rgba(39, 70, 136, 0.2);

  .menu {
    height: 100%;
    justify-content: flex-start;
    .item {
      height: 100%;
      padding: 0 20px;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      font-family: Source Han Sans CN;
      background-color: var(--header-menu-item-bg-color);
      color: var(--header-menu-item-color);
      cursor: pointer;
    }
    .item:hover {
      background: var(--header-menu-item-hover-bg-color);
      color: var(--header-menu-item-hover-color);
    }
    .selectItem {
      background: var(--header-menu-item-active-bg-color);
      color: var(--header-menu-item-active-color);

      &:hover{
        background: var(--header-menu-item-active-bg-color);
        color: var(--header-menu-item-active-color);
      }
    }
  }
}
</style>
